<template>
  <view class="distribution">
    <view class="tab-box">
      <view
        v-for="item in tabList"
        :key="item.code"
        class="tab-item"
        :class="{ active: currTab === item.code }"
        @click="toggleTab(item)"
      >
        {{ item.name }}
      </view>
    </view>
    <view class="content-box">
      <org-list v-show="currTab === TAB_TYPE.ORG" ref="org" />
      <project-list v-show="currTab === TAB_TYPE.PROJECT" ref="project" />
    </view>
  </view>
</template>

<script>
import OrgList from './components/org-list'
import ProjectList from './components/project-list'
const TAB_TYPE = {
  ORG: 'org',
  PROJECT: 'project'
}
export default {
  components: {
    OrgList,
    ProjectList
  },
  data() {
    return {
      TAB_TYPE,
      tabList: [
        {
          code: TAB_TYPE.ORG,
          name: '汇总信息'
        },
        {
          code: TAB_TYPE.PROJECT,
          name: '所有项目'
        }
      ],
      currTab: TAB_TYPE.ORG
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    toggleTab(target) {
      this.currTab = target.code
      this.refresh()
    },
    refresh() {
      const cases = {
        [TAB_TYPE.ORG]: this.$refs.org,
        [TAB_TYPE.PROJECT]: this.$refs.project
      }
      cases[this.currTab]?.refresh()
    }
  }
}
</script>

<style lang="scss" scoped>
.distribution {}
.tab-box {
  padding: 0 30rpx;
  border-bottom: 2rpx solid $border-base;
  display: flex;
  align-items: center;
  gap: 50rpx;
  .tab-item {
    position: relative;
    bottom: -2rpx;
    padding: 20rpx 0;
    border-bottom: 4rpx solid transparent;
    font-size: 32rpx;
    &.active {
      color: $primary;
      border-bottom-color: $primary;
    }
  }
}
.content-box {
  padding: 40rpx 30rpx;
  /deep/ {
    .no-content {
      margin-top: 30vh;
      text-align: center;
      color: $text-secondary;
    }
    .project-item {
      margin-top: 20rpx;
      position: relative;
      height: 321rpx;
      padding: 26rpx 30rpx 30rpx 30rpx;
      background-color: $white;
      border-radius: 10rpx;
      &:first-child {
        margin-top: 0;
      }
      &.offline {
        filter: grayscale(1) opacity(0.6);
      }
      .item-bg {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
      }
      .project-info {
        position: relative;
        z-index: 2;
        padding-left: 140rpx;
        min-height: 120rpx;
        .rate-box {
          position: absolute;
          left: 0;
          top: 6rpx;
          text-align: center;
          .progress-rate {
            color: $success;
            font-size: $font-size-3;
            .rate-unit {
              font-size: $font-size-0;
            }
          }
          .progress-text {
            font-size: $font-size-0;
          }
        }
        .info-box {
          .name-box {
            position: relative;
            padding-right: 140rpx;
            .project-name {
              font-size: $font-size-6;
              font-weight: bold;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .warning-box {
              position: absolute;
              height: 100%;
              top: 0;
              right: 0;
              text-align: right;
              font-size: $font-size-1;
              color: $warning;
              font-weight: normal;
              display: flex;
              align-items: center;
              .iconfont {
                margin-right: 6rpx;
              }
            }
          }
          .location-info {
            margin-top: 4rpx;
            min-height: 20rpx;
            font-size: $font-size-0;
            color: $text-secondary;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .admin-info {
            margin-top: 4rpx;
            font-size: $font-size-3;
            color: $text-base;
            display: flex;
            .admin-name {
              max-width: 320rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .admin-phone {
              margin-left: 10rpx;
            }
          }
        }
      }
      .lamp-info {
        position: relative;
        z-index: 2;
        margin-top: 16rpx;
        padding: 20rpx;
        border-radius: 10rpx;
        background-color: $background-light;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .info-item {
          text-align: center;
          &.power-saving {
            .item-count {
              color: $success;
            }
          }
          .item-count {
            font-size: $font-size-5;
            font-weight: bold;
          }
          .item-label {
            margin-top: 10rpx;
            font-size: $font-size-1;
            color: $text-secondary;
            .small {
              font-size: $font-size-0;
            }
          }
        }
      }
    }
  }
}
</style>
